    <template>
  <div id="app">
    <div id="nav" v-if="backstage">
        <div id="catalog_hide">
<!--     隐藏的目录       -->
            <catalog></catalog>
        </div>
<!--  导航    -->
      <heard style="height: 100px;"></heard>
<!--   目录   -->
      <div class="catalog" id="catalog_begin">
        <catalog></catalog>
        <hr style="opacity: 0.3;" />
      </div>
    </div>
    <router-view/>
<!-- 底部固定   -->
    <div id="bottom" v-if="backstage">
      <!--   过度栏     -->
      <div style="height: 50px;float: left;width: 100%;"></div>
      <!--  底部  -->
      <div class="bottom">
        <bottom></bottom>
      </div>
      <!--    超级底部    -->
      <div class="sup_boottom"></div>
    </div>
  </div>
</template>
<style lang="scss">
    #catalog_hide{
        display: none;
        position: fixed;
        background-color: white;
        width: 100%;
        z-index: 999;
    }
#app {
  padding: 0;
  margin: 0;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
    .sup_boottom{
        height: 50px;
        width: 100%;
        background-color: #f9f9f9;
        float: left;
    }
}
#nav {
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
      padding: 0;
    }
  }
  .catalog{
    margin-top: 150px;
  }
}
</style>
    <script>
      import Heard from "./views/heard";
      import Catalog from "./views/catalog";
      import Bottom from "./views/reception/zhy/bottom";
      export default {
        components: {Bottom, Catalog, Heard},
        data(){return{backstage:true}},
        methods:{
            backCheck(value){this.backstage=value;window.addEventListener('scroll', this.handleScroll)},
            handleScroll () {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop > 300){
                    document.getElementById('catalog_hide').style.display = "block";
                }else{
                    document.getElementById('catalog_hide').style.display = "none";
                }
            },
            },
        created() {},
        destroyed () {window.removeEventListener('scroll', this.handleScroll)},
        mounted() {window.addEventListener('scroll', this.handleScroll)},
          watch:{
              $route(to){
                  if (to.path === '/'){
                        this.backstage = true
                  }
              }
          }
      }
    </script>
